{% comment %}
@param {string} type - 'page' | 'post' | 'keynote'
@param {boolean} short
{% endcomment %}

{% if include.type == 'post' %}
<style type="text/css">
    header.intro-header {
        position: relative;
        background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')
    }

    {% if page.header-mask %}
    header.intro-header.header-mask {
        width: 100%;
        height: 100%;
        position: absolute
    }
    {% endif %}
</style>
{% if page.header-style == 'text' %}
<header class="intro-header style-text">
    {% else %}
    <header class="intro-header">
        {% endif %}
        <div class="header-mask"></div>
        {% if page.header-img-credit %}
        <div class="header-img-credit">
            Image by <a href="//{{page.header-img-credit-href}}">{{page.header-img-credit}}</a>
        </div>
        {% endif %}
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="post-heading">
                        <div class="tags">
                            {% for tag in page.tags %}
                            <a class="tag" href="{{ site.baseurl }}/tags/?tag={{ tag | url_encode }}" title="{{ tag }}">{{
                                tag }}</a>
                            {% endfor %}
                        </div>
                        <h1>{{ page.title }}</h1>
                        {% comment %} always create a h2 for keeping the margin {% endcomment %}
                        <h2 class="subheading">{{ page.subtitle }}</h2>
                        <span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %} on {{ page.date | date: "%B %-d, %Y" }}</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
</header>
{% endif %}

{% if include.type == 'keynote' %}
<style type="text/css">
    header.intro-header {
        height: 500px;
        overflow: hidden;
    }

    header.intro-header .container {
        visibility: hidden;
    }

    header iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
</style>
<header class="intro-header">
    <iframe src="{{page.iframe}}"></iframe>
    <!-- keep for SEO -->
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <div class="tags">
                        {% for tag in page.tags %}
                        <a class="tag" href="{{ site.baseurl }}/tags/?tag={{ tag | url_encode }}" title="{{ tag }}">{{
                            tag }}</a>
                        {% endfor %}
                    </div>
                    <h1>{{ page.title }}</h1>
                    {% comment %} always create a h2 for keeping the margin {% endcomment %}
                    <h2 class="subheading">{{ page.subtitle }}</h2>
                    <span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %}
                        on {{ page.date | date: "%B %-d, %Y" }}</span>
                </div>
            </div>
        </div>
    </div>
</header>
{% endif %}

{% if include.type == 'page' %}
<header class="intro-header"
        style="background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                {% if include.short %}
                <div class="site-heading" id="tag-heading">
                    {% else %}
                    <div class="site-heading">
                        {% endif %}
                        <h1>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</h1>
                        <span class="subheading">{{ page.description }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
{% endif %}